<template>
	<ls-page title="合伙人">
		<view class="code-container">
			<!-- 我的推广标题 -->
			<view class="tg-title" @tap="toPrtg">我的推广</view>

			<view class="code-container-main">
				<view class="main-center">
					 <uqrcode class="center-img" ref="myqrcode" canvas-id="qrcode" :value="text" :options="{ margin: 0}" ></uqrcode>
				</view>

				<view class="hhr-text">合伙人码：{{ comSharingCardNo }}</view>
				<view class="store-title">{{ shopName }}</view>
				<view class="store-text">识别上方二维码加入</view>
			</view>

			<!-- 分享按钮 -->
			<view class="footer-box">
				<view class="footer-btn" @tap="submitFx">分享</view>
			</view>
		</view>

	</ls-page>
</template>

<script setup>
	
	import dayjs from 'dayjs';
	import { HFiveMemberAppObjProcess } from '@/api/public.js'
	import { ref, onMounted, onUnmounted } from 'vue'
	import { _FormatNumber } from '@/until/tools.js'
	import setting from "@/common/config.js"; 
	
	const comSharingCardNo = ref('')
	const shopName = ref('')
	const cardInfo = ref(uni.getStorageSync('storeCard')) //门店卡信息
	const shopInfo = ref(uni.getStorageSync('shopInfo')) //门店信息
	// // 初始化二维码内容
	const text = ref('')
	const getCode = () => {
		
	        // text.value = `https://jtmckj.com/zttt/?brd=${shopInfo.value.brandCode}&org=${shopInfo.value.orgCode}&comSharingCardNo=${cardInfo.value.code}`
			if(setting.APP_PATH == 'https://jtmckj.com/zttt/' ){
				text.value = `https://jtmckj.com/zttt/?brd=${shopInfo.value.brandCode}&org=${shopInfo.value.orgCode}&comSharingCardNo=${cardInfo.value.code}`
			}else if(setting.APP_PATH == 'https://jtmckj.com/kbq/' ){
				text.value = `https://jtmckj.com/kbq/?brd=${shopInfo.value.brandCode}&org=${shopInfo.value.orgCode}&comSharingCardNo=${cardInfo.value.code}`
			}
			
			if(setting.APP_PATH == 'https://jtmckj.cn/kbq/'){
				text.value = `https://jtmckj.cn/kbq/?brd=${shopInfo.value.brandCode}&org=${shopInfo.value.orgCode}&comSharingCardNo=${cardInfo.value.code}`
			}else if(setting.APP_PATH == 'https://jtmckj.cn/zttt/' ){
				text.value = `https://jtmckj.cn/zttt/?brd=${shopInfo.value.brandCode}&org=${shopInfo.value.orgCode}&comSharingCardNo=${cardInfo.value.code}`
			}
			
	      
	}
	
	const toPrtg = ()=>{
		uni.navigateTo({
			url: '/subpkg/view/myPartner/myPrtg/myPrtg'
		})
	}
	
	
	const submitFx = ()=>{
		if(myqrcode.value){
			myqrcode.value.save({
			  success: () => {
			   
			  }
			});
		}
	}
	
	const SDKConfig = ref({})
	const myqrcode = ref(null)
	onShow(async()=>{
		comSharingCardNo.value = cardInfo.value.code
		shopName.value = shopInfo.value.orgName
		getCode()
	})

	
</script>

<style lang="scss">
	.code-container {
		width: 100%;
		height: 100%;
		padding: 40rpx 32rpx 0rpx;
		box-sizing: border-box;
		overflow: scroll;

		.code-container-main {
			background: #ffffff;
			border-radius: 16rpx;
			position: relative;
			padding: 80rpx 43rpx 40rpx;

			.code-img {
				position: absolute;
				width: 120rpx;
				height: 120rpx;
				top: -60rpx;
				left: 291rpx;
			}

			.main-header {
				display: flex;
				align-items: flex-end;
				justify-content: space-between;
				padding-bottom: 60rpx;

				.main-header-left {
					.left-value {
						font-family: PingFang SC;
						font-weight: bold;
						font-size: 40rpx;
						color: #212121;
						line-height: 40rpx;
						padding-bottom: 24rpx;
					}

					.left-title {
						font-family: PingFang SC;
						font-weight: 500;
						font-size: 28rpx;
						color: #666666;
						line-height: 28rpx;
						padding-left: 2rpx;
					}
				}

				.main-header-right {
					background: #212121;
					border-radius: 30rpx;
					font-family: PingFang SC;
					font-weight: 500;
					font-size: 32rpx;
					color: #ffffff;
					line-height: 32rpx;
					padding: 15rpx 33rpx;
				}
			}

			.main-center {
				margin-bottom: 40rpx;
				display: flex;
				align-items: center;
				justify-content: center;
				.center-img {
					// width: 600rpx;
					// height: 600rpx;
				}
			}

			.main-footer {
				display: flex;
				align-items: center;
				justify-content: space-between;
				background: var(--one--back-color);
				border-radius: 4rpx;
				padding: 24rpx 48rpx;

				.footer-left {
					font-family: PingFang SC;
					font-weight: 500;
					font-size: 32rpx;
					color: #666666;
					line-height: 32rpx;
				}

				.footer-right {
					font-family: PingFang SC;
					font-weight: 500;
					font-size: 32rpx;
					color: #212121;
					line-height: 32rpx;
					padding-left: 32rpx;
					border-left: 1px solid #212121;
				}
			}
		}
	}

	.canvas-wrap {
		width: 600rpx;
		height: 600rpx;
		display: flex;
		justify-content: center;
		align-items: center;
		background-color: #fff;
		border-radius: 6rpx;
		border: 1px solid #e4e4e4;
	}

	.store-fktext {
		text-align: center;
		margin-bottom: 60rpx;
		font-family: PingFang SC;
		font-weight: 500;
		font-size: 36rpx;
		color: #212121;
	}

	.tg-title {
		display: flex;
		justify-content: flex-end;
		font-family: PingFang SC;
		font-weight: 500;
		font-size: 32rpx;
		color: #212121;
		margin-bottom: 20rpx;
	}

	.hhr-text {
		text-align: center;
		font-weight: 500;
		font-size: 26rpx;
		color: #212121;
	}

	.store-title {
		margin-top: 40rpx;
		font-family: PingFang SC;
		text-align: center;
		font-weight: bold;
		font-size: 36rpx;
		color: #212121;
	}

	.store-text {
		margin-top: 23rpx;
		font-weight: 500;
		text-align: center;
		font-size: 24rpx;
		color: #999999;
	}

	.footer-box {
		width: 100%;
		position: fixed;
		bottom: 20rpx;
		left: 0;
		padding-bottom: env(safe-area-inset-bottom);
	}

	.footer-btn {
		margin: 0 auto;
		width: 92%;
		height: 80rpx;
		background: #212121;
		border-radius: 40rpx;
		text-align: center;
		line-height: 80rpx;
		font-weight: bold;
		font-size: 32rpx;
		color: #FFFFFF;
	}

	.canvas {
		z-index: 10;
	}

	.popup-container {
		position: relative;
		padding-bottom: 60rpx;
		z-index: 900;

		.title {
			text-align: center;
			font-weight: bold;
			font-size: 32rpx;
			color: #212121;
		}

		.flex-icon-bwt {
			position: relative;
			margin-top: 40rpx;
			display: flex;
			align-items: center;
			justify-content: space-between;

			.item-box {
				display: flex;
				flex-direction: column;
				align-items: center;
				justify-content: center;

				image {
					width: 100rpx;
					height: 100rpx;
					margin-bottom: 26rpx;
				}

				.text {
					font-weight: 500;
					font-size: 24rpx;
					color: #212121;
				}
			}

		}
	}

	.close-btn {
		position: absolute;
		width: 38rpx;
		height: 38rpx;
		right: 20rpx;
		top: 35rpx;
	}

	.share {
		opacity: 0;
		position: relative;
		width: 100rpx;
		height: 100rpx;
	}
</style>